<template>
  <div class="app-container">

  </div>
</template>
<script>
import { fetchDetail, fetchEchartDetail } from "@/api/table";
import format from "date-format";
import { formatDateTime, getStore } from "@/utils/common";
import easyChart from "@/components/EasyChart";

export default {
  data() {
    return {};
  },
  components: {
    easyChart
  },
  mounted() {},
  methods: {
    initData() {
      if (this.crpBatch) {
        this.crpBatch = JSON.parse(getStore("crp-batch"));
      }
      this.getEchartData();
    },
    //时间格式化
    formatterTime(t) {
      if (t) {
        const newTime = format("yyyy-MM-dd hh:mm:ss", new Date(t)).split(" ");
        let time = "";
        time += newTime[0] + "\n" + newTime[1];
        return time;
      } else {
        return "";
      }
    },
    async getEchartData() {
      for (let i = 0; i < this.crpBatch.length; i++) {
        let res = await fetchEchartDetail({
          id: this.crpBatch[i].id
        });
        //通道1
        let arry1 = [];
        //通道2
        let arry2 = [];
        //index
        let arry3 = [];
        res.data.forEach((item, index) => {
          const data = {};
          data.adc6 = item.adc6;
          data.adc7 = item.adc7;
          arry1.push(data.adc6);
          arry2.push(data.adc7);
          arry3.push(index + 1);
        });
        this.note.push(this.crpBatch[i].note);
        this.adc6[i] = arry1;
        this.adc7[i] = arry2;
        //x轴index
        this.gapTime[i] = arry3;
        //查询最长index
        const maxGap = "";
        for (let x in this.gapTime) {
          if (
            maxGap == "" ||
            this.gapTime[x].length > this.gapTime[maxGap].length
          ) {
            maxGap = x;
          }
        }
        this.maxGap = this.gapTime[maxGap];

        this.series1.push({
          name: this.crpBatch[i].note,
          type: "line",
          smooth: true,
          showSymbol: false,
          hoverAnimation: false,
          data: this.adc6[i]
        });
      }

      this.detailData1 = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: this.note
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "4%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.maxGap,
          axisLine: { onZero: false }
        },
        yAxis: {
          type: "value",
          max: function(n) {
            const max = Math.ceil(n.max / 10) * 10;
            return max;
          },
          min: function(n) {
            const min = Math.floor(n.min / 10) * 10;
            return min;
          },
          axisLine: { onZero: false }
        },
        series: this.series1
      };
    }
  }
};
</script>
<style lang="less" scoped>
.demo-image__lazy {
  height: 400px;
  overflow-y: auto;
  img {
    width: 100%;
  }
}
.line1 {
  margin-top: 50px;
}
</style>
